<template>
  <div class="new-songs">
    <div class="title">最新音乐</div>
    <div class="song-list">
      <div class="song-item" v-for="item in newSongList" :key="item.id" @click="play(item.id)">
        <div class="left">
          <div class="name">{{item.name}}</div>
          <div class="info">{{item.song.album.name}}</div>
        </div>
        <div class="right">
          <img src="../assets/play.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'

export default {
  setup() {
    /**
     * @param {[]} newSongList 最新歌曲列表
     */
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const newSongList = ref([])

    // 请求数据
    proxy.$http.get('/personalized/newsong').then(res => {
      if (res.code === 200) {
        newSongList.value = res.result
      }
    })

    // 点击播放
    const play = id => {
      store.commit('setSongId', id)
    }

    return {
      newSongList,
      play
    }
  }
}
</script>

<style lang="less" scoped>
.new-songs {
  width: 7.5rem;
  font-size: 0.4rem;
  margin-top: 0.5rem;
  .title {
    border-left: 0.1rem solid red;
    padding-left: 0.1rem;
  }
  .song-list {
    width: 7.5rem;
    padding: 0 0.2rem;
    margin-top: 0.2rem;
    .song-item {
      height: 1.2rem;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid rgb(191, 191, 191);
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .info {
          font-size: 0.3rem;
          color: rgb(191, 191, 191);
        }
      }
      .right {
        display: flex;
        align-items: center;
        img {
          height: 0.6rem;
          width: 0.6rem;
        }
      }
    }
  }
}
</style>